<template>
  <main>
    <div class="input">
      <div class="state">
        <span>商品状态 </span>
        <el-select v-model="value" class="m-2" placeholder="全部商品">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </div>
      <div class="number">
        <span>商品编号</span>
        <el-input v-model="number" />
      </div>
      <div class="number">
        <span>商品名称</span>
        <el-input v-model="name" />
      </div>
      <div class="btn">
        <el-button type="danger" @click="query">查询</el-button>
        <el-button @click="remove">重置</el-button>
      </div>
    </div>
    <!--  -->
    <div class="modify-btn">
      <el-button type="danger">+ 新增商品</el-button>
      <el-button @click="upperAll">批量上架</el-button>
      <el-button @click="offAll">批量下架</el-button>
      <el-button @click="removeAll">批量删除</el-button>
    </div>

    <!-- 表格 -->
    <el-table
      stripe
      ref="multipleTableRef"
      :data="tableData"
      style="width: 100%"
      @select="selectionRow"
      @select-all="selectAll"
    >
      <el-table-column type="selection" width="55" />
      <el-table-column label="商品编号" property="date">
        <template #default="scope">
          <el-input v-model="new1.newdate" v-if="scope.row.modify" />
        </template>
      </el-table-column>
      <el-table-column property="name" label="商品名称">
        <template #default="scope">
          <el-input v-model="new1.newname" v-if="scope.row.modify" />
        </template>
      </el-table-column>
      <el-table-column property="address" label="供应商">
        <template #default="scope">
          <el-input v-model="new1.newaddress" v-if="scope.row.modify" />
        </template>
      </el-table-column>
      <el-table-column property="price" label="售价" sortable>
        <template #default="scope">
          <el-input v-model="new1.newprice" v-if="scope.row.modify" />
        </template>
      </el-table-column>
      <el-table-column property="stock" label="库存" sortable>
        <template #default="scope">
          <el-input v-model="new1.newstock" v-if="scope.row.modify" />
        </template>
      </el-table-column>
      <el-table-column property="sales" label="销量" sortable>
        <template #default="scope">
          <el-input v-model="new1.newsales" v-if="scope.row.modify" />
        </template>
      </el-table-column>
      <el-table-column property="state" label="状态"> </el-table-column>
      <el-table-column property="data" label="创建日期" width="130">
        <template #default="scope">
          <el-input v-model="new1.newdata" v-if="scope.row.modify" />
        </template>
      </el-table-column>
      <el-table-column label="操作" width="200">
        <template #default="scope">
          <el-button
            size="small"
            type="danger"
            @click="change(scope.$index, scope.row)"
            v-if="scope.row.modify === false"
            >编辑</el-button
          >
          <el-button
            size="small"
            type="danger"
            @click="success(scope.$index, scope.row)"
            v-else
            >完成</el-button
          >
          <el-button
            v-if="scope.row.Tick === false"
            size="small"
            @click="change(scope.$index, scope.row)"
            >修改</el-button
          >
          <el-button v-else size="small" @click="off(scope.$index, scope.row)"
            >下架</el-button
          >
          <el-button size="small" @click="open(scope.$index, scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <div class="demo-pagination-block">
      <el-pagination
        v-model:currentPage="currentPage4"
        v-model:page-size="pageSize4"
        :small="small"
        :page-sizes="[20, 30]"
        :disabled="disabled"
        :background="background"
        layout="prev,pager, next,
      sizes, jumper"
        :total="count"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </main>
</template>

<script lang="ts">
import { defineComponent, ref, computed, onMounted, reactive } from "vue";
import { ElTable, ElMessage, ElMessageBox } from "element-plus";
import { useStore } from "vuex";

interface User {
  date: string;
  name: string;
  address: string;
  price: string;
  Tick: boolean;
  stock: string;
  sales: string;
  data: string;
  state: string;
  modify: boolean;
}

export default defineComponent({
  setup() {
    const store = useStore();
    const value = ref<string>("");

    // 商品数据请求
    onMounted(() => {
      store.dispatch("goods/getgoodsAsync", {
        pageSize: pageSize4.value,
        currentPage: currentPage4.value,
      });
    });
    // 列表数据
    let tableData = computed(() => {
      return store.state.goods.goodsList;
    });

    const options = [
      {
        value: "销售中",
        label: "销售中",
      },
      {
        value: "已下架",
        label: "已下架",
      },
    ];

    // 商品名称
    const name = ref<string>("");
    // 商品编号
    const number = ref<string>("");

    const multipleTableRef = ref<InstanceType<typeof ElTable>>();
    const multipleSelection = ref<User[]>([]);

    // 修改效果的inpute框的值
    const new1 = reactive({
      newdate: "",
      newname: "",
      newaddress: "",
      newprice: "",
      newstock: "",
      newsales: "",
      newdata: "",
    });

    // 修改按钮
    const change = (index: number, row: User) => {
      row.modify = !row.modify;
      new1.newname = row.name;
      new1.newaddress = row.address;
      new1.newdate = row.date;
      new1.newprice = row.price;
      new1.newstock = row.stock;
      new1.newsales = row.sales;
      new1.newdata = row.data;
    };
    // 完成按钮
    const success = (index: number, row: User) => {
      row.modify = !row.modify;

      store.commit("goods/success", {
        row,
        new1,
      });
      new1.newdate = "";
      new1.newname = "";
      new1.newaddress = "";
      new1.newprice = "";
      new1.newstock = "";
      new1.newsales = "";
      new1.newdata = "";
    };

    // 下架按钮
    const off = (index: number, row: User) => {
      row.state = "已下架";
    };

    // 批量下架按钮
    const offAll = () => {
      store.commit("goods/offAll");
    };
    // 批量上架按钮
    const upperAll = () => {
      store.commit("goods/upperAll");
    };

    // 批量删除按钮
    const removeAll = () => {
      store.commit("goods/removeAll");
    };

    // 删除按钮
    const open = (index: number, row: User) => {
      ElMessageBox.confirm("", "订单删除后不可恢复，是否删除订单？", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true,
      })
        .then(() => {
          ElMessage({
            type: "success",
            message: "删除成功",
          });
          //  点击删除 删除当前row
          store.commit("goods/remove", row.date);
        })
        .catch(() => {
          ElMessage({
            type: "info",
            message: "取消成功",
          });
        });
    };

    // 查看是否当前的多选框已经打钩
    const selectionRow = (selection: any, row: any) => {
      let selected = selection.length && selection.indexOf(row) !== -1;
      if (selected) {
        row.Tick = true;
      } else {
        row.Tick = false;
      }
    };

    // 勾选全选触发
    const selectAll = (selection: any) => {
      store.commit("goods/selectAll", selection);
    };

    // 点击查询
    const query = () => {
      let queryObj = {
        state: value.value,
        name: name.value,
        date: number.value,
      };

      store.commit("goods/query", queryObj);
    };

    // 分页
    let currentPage4 = ref(1);
    const pageSize4 = ref(20);
    const small = ref(false);
    const background = ref(true);
    const disabled = ref(false);
    // 总条数
    const count = computed(() => {
      return store.state.goods.count;
    });

    const handleSizeChange = (val: number) => {
      store.dispatch("goods/getgoodsAsync", {
        pageSize: val,
        currentPage: 1,
      });
    };
    // 切换页面触发
    const handleCurrentChange = (val: number) => {
      store.dispatch("goods/getgoodsAsync", {
        pageSize: pageSize4.value,
        currentPage: val,
      });
    };

    // 点击重置
    const remove = () => {
      store.dispatch("goods/getgoodsAsync", {
        pageSize: 20,
        currentPage: 1,
      });
      currentPage4.value = 1;
      name.value = "";
      number.value = "";
      value.value = "";
    };

    return {
      value,
      options,
      tableData,
      multipleTableRef,
      multipleSelection,
      name,
      number,
      change,
      open,
      currentPage4,
      pageSize4,
      background,
      small,
      disabled,
      handleSizeChange,
      handleCurrentChange,
      selectionRow,
      remove,
      query,
      off,
      selectAll,
      offAll,
      upperAll,
      removeAll,
      success,
      new1,
      count,
    };
  },
});
</script>

<style lang="less" scoped>
main {
  .el-button--danger {
    background: #ffa79c;
  }
  width: 100%;
  min-width: 1120px;
  border-radius: 20px;
  background: #ffffff;
  padding: 24px 20px 24px 20px;
  .input {
    display: flex;
    position: relative;
    margin-bottom: 20px;
    .state {
      display: flex;
      margin-right: 30px;
      span {
        font-size: 18px;
        margin-right: 8px;
        line-height: 34px;
        white-space: nowrap;
      }

      /deep/.el-input__inner {
        min-width: 176px;
        min-height: 32px;
      }
    }
    .number {
      display: flex;
      margin-right: 30px;
      span {
        font-size: 18px;
        margin-right: 8px;
        white-space: nowrap;
        line-height: 34px;
      }
      /deep/.el-input__inner {
        min-width: 176px;
        min-height: 32px;
      }
    }
    .btn {
      min-width: 132px;
      position: absolute;
      right: 0;
    }
  }
  .modify-btn {
    display: flex;
    margin-bottom: 20px;
  }
  /deep/.el-table__header-wrapper .el-table__cell {
    background: #fff0ee;
  }
  /deep/.el-table_1_column_10 {
    text-align: center;
  }

  /deep/.demo-pagination-block {
    margin: 30px auto;
    display: flex;
    justify-content: center;
    align-items: center;
    .el-input__wrapper {
      margin-left: 20px;
    }
  }
  /deep/.el-button--primary {
    background: #fff0ee;
  }
}
</style>
